<!-- 注意 TableBar、TheTable、dovecote-info 组件已经在全局注册无需重复导入

    鸽棚信息获取：this.$store.state.Usersetting.AllDovecoteInfo
    基地信息获取：this.$store.state.Usersetting.BaseInfo
    当前所选鸽棚：this.$store.state.Usersetting.CurrentDovecote
-->
<template>
  <div class='page-content'>

    <!-- 生产统计下的页面每个页面都要引入这个组件 -->
    <dovecote-info></dovecote-info>

    <!-- 养殖管理模块数据的统计，其他模块无需引入，字段模块数自行调整，宽高大小于此保持一致 -->
    <el-row type="flex" class="dovecote_data" :gutter="10" style="margin-bottom:25px">
            <el-col :span="5">
                <el-card class="mini_card">
                    今日需照蛋数量:<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ffd700;
                        "
                        >10</i
                    >
                    个
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    今日需抽蛋数量:<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ee9a00;
                        "
                        >20</i
                    >
                    个
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    今日需查仔数量：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #03a9f4;
                        "
                        >15</i
                    >
                    个
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    昨日垫蛋数量：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #9acd32;
                        "
                        >30</i
                    >
                    个
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    昨日异常统计：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ff4040;
                        "
                        >3</i>个
                </el-card>
            </el-col>
    </el-row>
 
    <!-- 增删改查页面都要引入这个组件 -->
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="70px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="日期：">
                  <el-select v-model="value" clearable placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="订单号：">
                <el-input placeholder="订单号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="条件1：">
                <el-input placeholder="条件1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="条件2：">
                <el-input placeholder="条件2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="条件3：">
                <el-input placeholder="条件3"></el-input>
              </el-form-item>
            </el-col>

            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <div slot="bottom">
        <el-button type="primary" plain @click="showDialog('add')">新增用户</el-button>
        <el-button type="danger" plain @click="showDialog('add')">批量删除</el-button>
        <el-button type="success" plain @click="showDialog('add')">导入</el-button>
        <el-button type="success" plain @click="showDialog('add')">导出</el-button>
      </div>

      <!-- 拓展按钮 不用的删掉-->
      <el-tooltip
      slot="button1"
      effect="dark"
      content="搜索按钮"
      placement="top-start"
      >
        <el-button icon="el-icon-search" @click="isShowSearchWrap()" size="small"/>
      </el-tooltip>
    </table-bar>

    <!-- 增删改查都要引入这个组件 -->
    <the-table :data="userList" :showPage="false" ref="table">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="头像" prop="avatar" v-if="columns[0].show">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="username" v-if="columns[1].show"/>
      <el-table-column label="手机号" prop="mobile" v-if="columns[2].show"/>
      <el-table-column label="邮箱" prop="email" v-if="columns[3].show"/>
      <el-table-column label="性别" prop="sex" v-if="columns[4].show">
        <template slot-scope="scope">
          {{scope.row.sex === 1 ? '男' : '女'}}
        </template>
      </el-table-column>
      <el-table-column label="部门" prop="dep" v-if="columns[5].show"/>
      <el-table-column label="状态" prop="status" v-if="columns[6].show">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? '' : 'info'">
            {{scope.row.status === 1 ? '启用' : '禁用'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="create_time" v-if="columns[7].show"/>
      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="showDialog('edit')">
            编辑
          </el-button>
          <el-button type="text" style="color: #FA6962" icon="el-icon-delete" @click="deleteUser(scope)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </the-table>

    <el-pagination
            :page-sizes="[1, 5, 10, 15]"
            :page-size="1"
            :current-page="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100"
            class="page"
        >
    </el-pagination>

    <el-dialog :title="dialogTitle" width="500px" :visible.sync="dvEdit">
      <el-form ref="form" :model="form" label-width="60px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.mibile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="form.dep" placeholder="请选择部门">
            <el-option label="人事部" value="shanghai"></el-option>
            <el-option label="开发部" value="beijing"></el-option>
            <el-option label="测试部" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dvEdit = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DovecoteInfo from '../../components/common/DovecoteInfo.vue';
  export default {
  components: { DovecoteInfo },
    name: "Demo",
    meta: {
        title: "整体风格Demo",
    },
    data () {
      return {
        dvEdit: false,
        dialogTitle: '',
        form: {
          username: '',
          mibile: '',
          email: '',
          sex: 1,
          dep: '',
          status: true
        },
        options: [{
          value: '1',
          label: 'A01'
        }, {
          value: '2',
          label: 'A02'
        }],
        value: '',
        userList: [
          {
            username: '中小鱼',
            sex: 0,
            mobile: '18123820191',
            email: 'lingchen',
            dep: '开发部',
            status: 1,
            create_time: '2020-11-14',
            avatar: 'https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0'
          },{
            username: '何小荷',
            sex: 1,
            mobile: '18123820191',
            email: 'lingchen',
            dep: '开发部',
            status: 1,
            create_time: '2020-11-14',
            avatar: 'https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0'
          },{
            username: '誶誶淰',
            sex: 0,
            mobile: '18123820191',
            email: 'lingchen',
            dep: '开发部',
            status: 0,
            create_time: '2020-11-14',
            avatar: 'https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0'
          }
        ],
        columns: [
          { name: "头像", show: true },
          { name: "用户名", show: true },
          { name: "手机号", show: true },
          { name: "邮箱", show: true },
          { name: "性别", show: true },
          { name: "部门", show: true },
          { name: "状态", show: true },
          { name: "创建日期", show: true },
        ]
      };
    },
    methods: {
      showDialog(type) {
        this.dvEdit = true
        this.dialogTitle = type === 'add' ? '新增用户' : '编辑用户'
      },
      onSubmit() {
        this.dvEdit = false
      },
      deleteUser(scope) {
        this.$confirm('您确定要注销当前用户吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.userList.splice(scope.$index, 1)
          this.$message(({
              message: '删除成功',
              type: 'success'
          }))
        }).catch(() => {})
      },
      changeColumn(columns) {
        this.columns = columns
        this.$refs.table.doLayout()
      }
    }
  }
</script>

<style lang='scss' scoped>
  .page-content {
    width: 100%;
    height: 100%;

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .page {
        margin-top: 6px;
        text-align: center;
    }
  }
</style>
